<template>
    <div class="smart-table-demo">
        <div class="demo-header">
            <h1>智能表格组件示例</h1>
            <p>支持自动类型检测、智能筛选、排序和分页的通用表格组件</p>
        </div>

        <div class="demo-content">
            <!-- 用户管理表格示例 -->
            <div class="demo-section">
                <h2>用户管理表格</h2>
                <SmartTable :data="userData" :columns="userColumns" :actions="userActions" :loading="loading"
                    :show-selection="true" :show-index="true" :show-pagination="true" :total="userData.length"
                    :stripe="true" :border="true" @action="handleAction" />
            </div>

            <!-- 订单管理表格示例 -->
            <div class="demo-section">
                <h2>订单管理表格</h2>
                <SmartTable :data="orderData" :columns="orderColumns" :actions="orderActions" :loading="loading"
                    :show-selection="true" :show-index="true" :show-pagination="true" :total="orderData.length"
                    :stripe="true" :border="true" @action="handleAction" />
            </div>

            <!-- 商品管理表格示例 -->
            <div class="demo-section">
                <h2>商品管理表格</h2>
                <SmartTable :data="productData" :columns="productColumns" :actions="productActions" :loading="loading"
                    :show-selection="true" :show-index="true" :show-pagination="true" :total="productData.length"
                    :stripe="true" :border="true" @action="handleAction" />
            </div>

            <!-- 宽度自适应对比示例 -->
            <div class="demo-section">
                <h2>宽度自适应对比</h2>

                <div style="display: grid; grid-template-columns: 1fr; gap: 24px;">
                    <div>
                        <h3 style="margin: 0 0 12px 0;">自动宽度自适应（SmartTable 默认）</h3>
                        <SmartTable :data="orderData" :columns="autoAdaptColumns" :loading="loading" :stripe="true"
                            :border="true" :show-pagination="false" />
                    </div>

                    <div>
                        <h3 style="margin: 0 0 12px 0;">不启用自动自适应（对照组，Element Plus 原生表格）</h3>
                        <el-table :data="orderData" border stripe table-layout="fixed" style="width: 100%">
                            <el-table-column prop="id" label="订单号" min-width="120" />
                            <el-table-column prop="customer" label="客户" min-width="120" />
                            <el-table-column prop="product" label="商品" min-width="140" />
                            <el-table-column prop="status" label="状态" min-width="100" />
                            <el-table-column prop="createTime" label="下单时间" min-width="180" />
                        </el-table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import SmartTable from '@/components/smart-table/SmartTable.vue'

// 响应式数据
const loading = ref(false)

// 用户数据
const userData = ref([
    {
        id: 1,
        username: 'admin1',
        email: 'admin1@example.com',
        role: '超级管理员',
        status: '活跃',
        createTime: '2023-01-15 16:30:00',
        lastLogin: '2023-06-20 22:25:00'
    },
    {
        id: 2,
        username: 'admin2',
        email: 'admin2@example.com',
        role: '内容管理员',
        status: '活跃',
        createTime: '2023-02-10 18:15:00',
        lastLogin: '2023-06-18 17:40:00'
    },
    {
        id: 3,
        username: 'admin3',
        email: 'admin3@example.com',
        role: '财务管理员',
        status: '禁用',
        createTime: '2023-03-06 00:45:00',
        lastLogin: '2023-05-12 19:20:00'
    },
    {
        id: 4,
        username: 'admin4',
        email: 'admin4@example.com',
        role: '内容管理员',
        status: '活跃',
        createTime: '2023-04-20 21:10:00',
        lastLogin: '2023-06-20 00:30:00'
    },
    {
        id: 5,
        username: 'admin5',
        email: 'admin5@example.com',
        role: '系统管理员',
        status: '活跃',
        createTime: '2023-05-15 17:20:00',
        lastLogin: '2023-06-21 16:15:00'
    }
])

// 用户表格列配置
const userColumns = [
    {
        key: 'id',
        label: 'ID',
        type: 'number' as const,
        width: 80,
        sortable: true
    },
    {
        key: 'username',
        label: '用户名',
        type: 'string' as const,
        width: 120,
        sortable: true,
        filterable: true
    },
    {
        key: 'email',
        label: '邮箱',
        type: 'string' as const,
        width: 200,
        sortable: true,
        filterable: true
    },
    {
        key: 'role',
        label: '角色',
        type: 'tag' as const,
        width: 150,
        sortable: true,
        filterable: true,
        tagConfig: {
            typeMap: {
                '超级管理员': 'danger',
                '内容管理员': 'primary',
                '财务管理员': 'warning',
                '系统管理员': 'success'
            }
        }
    },
    {
        key: 'status',
        label: '状态',
        type: 'tag' as const,
        width: 100,
        sortable: true,
        filterable: true,
        tagConfig: {
            typeMap: {
                '活跃': 'success',
                '禁用': 'danger'
            }
        }
    },
    {
        key: 'createTime',
        label: '创建时间',
        type: 'datetime' as const,
        width: 180,
        sortable: true,
        filterable: true
    },
    {
        key: 'lastLogin',
        label: '最后登录',
        type: 'datetime' as const,
        width: 180,
        sortable: true,
        filterable: true
    }
]

// 用户操作配置
const userActions = [
    {
        key: 'edit',
        label: '编辑',
        type: 'primary',
        handler: (row: any) => {
            ElMessage.info(`编辑用户: ${row.username}`)
        }
    },
    {
        key: 'delete',
        label: '删除',
        type: 'danger',
        handler: (row: any) => {
            ElMessage.warning(`删除用户: ${row.username}`)
        }
    }
]

// 订单数据
const orderData = ref([
    {
        id: 'ORD001',
        customer: '张三',
        product: 'iPhone 15',
        category: '电子产品',
        status: '已发货',
        amount: 6999,
        createTime: '2023-06-20 10:30:00',
        deliveryTime: '2023-06-22 14:00:00'
    },
    {
        id: 'ORD002',
        customer: '李四',
        product: 'MacBook Pro',
        category: '电子产品',
        status: '待发货',
        amount: 12999,
        createTime: '2023-06-21 15:45:00',
        deliveryTime: '2023-06-25 09:00:00'
    },
    {
        id: 'ORD003',
        customer: '王五',
        product: 'Nike运动鞋',
        category: '服装鞋帽',
        status: '已完成',
        amount: 599,
        createTime: '2023-06-19 08:20:00',
        deliveryTime: '2023-06-21 16:30:00'
    },
    {
        id: 'ORD004',
        customer: '赵六',
        product: '咖啡机',
        category: '家用电器',
        status: '已发货',
        amount: 1299,
        createTime: '2023-06-18 20:15:00',
        deliveryTime: '2023-06-20 11:00:00'
    },
    {
        id: 'ORD005',
        customer: '钱七',
        product: '书籍套装',
        category: '图书文具',
        status: '待发货',
        amount: 299,
        createTime: '2023-06-22 12:30:00',
        deliveryTime: '2023-06-24 14:00:00'
    }
])

// 订单表格列配置
const orderColumns = [
    {
        key: 'id',
        label: '订单号',
        type: 'string' as const,
        width: 120,
        sortable: true
    },
    {
        key: 'customer',
        label: '客户',
        type: 'string' as const,
        width: 100,
        sortable: true,
        filterable: true
    },
    {
        key: 'product',
        label: '商品',
        type: 'string' as const,
        width: 150,
        sortable: true,
        filterable: true
    },
    {
        key: 'category',
        label: '分类',
        type: 'tag' as const,
        width: 120,
        sortable: true,
        filterable: true,
        tagConfig: {
            typeMap: {
                '电子产品': 'primary',
                '服装鞋帽': 'success',
                '家用电器': 'warning',
                '图书文具': 'info'
            }
        }
    },
    {
        key: 'status',
        label: '状态',
        type: 'tag' as const,
        width: 100,
        sortable: true,
        filterable: true,
        tagConfig: {
            typeMap: {
                '待发货': 'warning',
                '已发货': 'primary',
                '已完成': 'success',
                '已取消': 'danger'
            }
        }
    },
    {
        key: 'amount',
        label: '金额',
        type: 'number' as const,
        width: 100,
        sortable: true,
        render: (row: any) => `¥${row.amount.toLocaleString()}`
    },
    {
        key: 'createTime',
        label: '下单时间',
        type: 'datetime' as const,
        width: 180,
        sortable: true,
        filterable: true
    },
    {
        key: 'deliveryTime',
        label: '配送时间',
        type: 'datetime' as const,
        width: 180,
        sortable: true,
        filterable: true
    }
]

// 自动自适应对比列：不设置列宽，交由 SmartTable 自动等分
const autoAdaptColumns = [
    { key: 'id', label: '订单号', type: 'string', filterable: true },
    { key: 'customer', label: '客户', type: 'string', filterable: true },
    { key: 'product', label: '商品', type: 'string', filterable: true },
    { key: 'status', label: '状态', type: 'tag', filterable: true, tagConfig: { typeMap: { '待发货': 'warning', '已发货': 'primary', '已完成': 'success', '已取消': 'danger' } } },
    { key: 'createTime', label: '下单时间', type: 'datetime', filterable: true },
]

// 订单操作配置
const orderActions = [
    {
        key: 'view',
        label: '查看',
        type: 'primary',
        handler: (row: any) => {
            ElMessage.info(`查看订单: ${row.id}`)
        }
    },
    {
        key: 'ship',
        label: '发货',
        type: 'success',
        handler: (row: any) => {
            ElMessage.success(`订单 ${row.id} 已发货`)
        }
    }
]

// 商品数据
const productData = ref([
    {
        id: 'P001',
        name: 'iPhone 15',
        category: '手机',
        brand: 'Apple',
        price: 6999,
        stock: 50,
        status: '在售',
        createTime: '2023-06-01 10:00:00',
        updateTime: '2023-06-20 15:30:00'
    },
    {
        id: 'P002',
        name: 'MacBook Pro',
        category: '笔记本',
        brand: 'Apple',
        price: 12999,
        stock: 20,
        status: '在售',
        createTime: '2023-06-02 11:00:00',
        updateTime: '2023-06-21 09:15:00'
    },
    {
        id: 'P003',
        name: 'Nike运动鞋',
        category: '鞋类',
        brand: 'Nike',
        price: 599,
        stock: 100,
        status: '在售',
        createTime: '2023-06-03 14:00:00',
        updateTime: '2023-06-19 16:45:00'
    },
    {
        id: 'P004',
        name: '咖啡机',
        category: '家电',
        brand: '德龙',
        price: 1299,
        stock: 30,
        status: '缺货',
        createTime: '2023-06-04 16:00:00',
        updateTime: '2023-06-18 10:20:00'
    },
    {
        id: 'P005',
        name: '书籍套装',
        category: '图书',
        brand: '人民文学',
        price: 299,
        stock: 200,
        status: '在售',
        createTime: '2023-06-05 09:00:00',
        updateTime: '2023-06-22 13:10:00'
    }
])

// 商品表格列配置
const productColumns = [
    {
        key: 'id',
        label: '商品ID',
        type: 'string' as const,
        width: 100,
        sortable: true
    },
    {
        key: 'name',
        label: '商品名称',
        type: 'string' as const,
        width: 150,
        sortable: true,
        filterable: true
    },
    {
        key: 'category',
        label: '分类',
        type: 'tag' as const,
        width: 100,
        sortable: true,
        filterable: true,
        tagConfig: {
            typeMap: {
                '手机': 'primary',
                '笔记本': 'success',
                '鞋类': 'warning',
                '家电': 'info',
                '图书': 'info'
            }
        }
    },
    {
        key: 'brand',
        label: '品牌',
        type: 'string' as const,
        width: 100,
        sortable: true,
        filterable: true
    },
    {
        key: 'price',
        label: '价格',
        type: 'number' as const,
        width: 100,
        sortable: true,
        render: (row: any) => `¥${row.price.toLocaleString()}`
    },
    {
        key: 'stock',
        label: '库存',
        type: 'number' as const,
        width: 80,
        sortable: true,
        render: (row: any) => {
            const stock = row.stock
            if (stock === 0) return '<span style="color: #f56c6c;">缺货</span>'
            if (stock < 10) return `<span style="color: #e6a23c;">${stock} (低库存)</span>`
            return stock.toString()
        }
    },
    {
        key: 'status',
        label: '状态',
        type: 'tag' as const,
        width: 100,
        sortable: true,
        filterable: true,
        tagConfig: {
            typeMap: {
                '在售': 'success',
                '缺货': 'danger',
                '下架': 'info'
            }
        }
    },
    {
        key: 'createTime',
        label: '创建时间',
        type: 'datetime' as const,
        width: 180,
        sortable: true,
        filterable: true
    },
    {
        key: 'updateTime',
        label: '更新时间',
        type: 'datetime' as const,
        width: 180,
        sortable: true,
        filterable: true
    }
]

// 商品操作配置
const productActions = [
    {
        key: 'edit',
        label: '编辑',
        type: 'primary',
        handler: (row: any) => {
            ElMessage.info(`编辑商品: ${row.name}`)
        }
    },
    {
        key: 'stock',
        label: '库存',
        type: 'warning',
        handler: (row: any) => {
            ElMessage.info(`调整库存: ${row.name}`)
        }
    }
]

// 处理操作
const handleAction = (action: string, row: any) => {
    console.log('Action:', action, 'Row:', row)
}

// 组件挂载
onMounted(() => {
    console.log('SmartTable Demo 已加载')
})
</script>

<style scoped>
.smart-table-demo {
    padding: 20px;
    max-width: 1400px;
    margin: 0 auto;
}

.demo-header {
    text-align: center;
    margin-bottom: 40px;
    padding: 30px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    color: white;
}

.demo-header h1 {
    margin: 0 0 10px 0;
    font-size: 2.5rem;
    font-weight: bold;
}

.demo-header p {
    margin: 0;
    font-size: 1.1rem;
    opacity: 0.9;
}

.demo-content {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.demo-section {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.demo-section h2 {
    margin: 0 0 20px 0;
    font-size: 1.5rem;
    color: #333;
    font-weight: 600;
    padding-bottom: 12px;
    border-bottom: 2px solid #e9ecef;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .smart-table-demo {
        padding: 16px;
    }

    .demo-header {
        padding: 20px;
    }

    .demo-header h1 {
        font-size: 2rem;
    }

    .demo-section {
        padding: 16px;
    }
}
</style>
